/**
 * withList: 高阶组件工厂 this.props是xxx父组件调用titleList时传入的参数
 * titleList: 高阶组件 this.props是withList组件中传入的参数{...this.props, list}
 * xxx: 父组件
*/
import withList from "./withList"
import { Component, createRef } from "react"
// import ReactDom from "react-dom"

const myRef = createRef()
class TitleList extends Component {
  onclick = () => {
    // ReactDom.unmountComponentAtNode(myRef.current)
    // myRef.current?.parentElement?.removeChild(myRef.current)
    // this.componentWillUnmount() // 手动调用不会注销组件
    // console.log(myRef.current)
    // console.log(myRef.current.parentElement)
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }
  render() {
    return (
      <ul ref={myRef}>
        {this.props.list.map((item) => {
          return (
            <li key={item.id} onClick={this.onclick}>{item.title}</li>
          )
        })}
      </ul>
    )
  }
}

export default withList(TitleList, () => {
  return Promise.resolve([
    {id: 0, title: 'title1'},
    {id: 1, title: 'title2'},
    {id: 2, title: 'title3'},
    {id: 3, title: 'title4'},
  ])
}, myRef)